<script setup lang="ts">
    // push时传对象, params (写name传递) 就通过 this.$route.params获取
    // push时传对象, query  (写path)     就通过 this.$route.query 获取
    // 动态路由传参  /article/:id        this.$route.params 获取
    import {
        reqGetArticleInfo,
        reqSetLike,
        reqDelLike,
        reqDislike,
        reqCancelDislike,
    } from "@/api/article";
    import { reqSetFocus, reqDelFocus } from "@/api/user";
    import { ref } from "vue";
    import { Article } from "@/types/article";
    import { useRoute } from "vue-router";
    import { Toast } from "vant";
    import Comment from "./comment.vue";
    const route = useRoute();
    const loading = ref(true); // 控制加载中的 loading 状态
    const articleInfo = ref<Article>({
        art_id: "",
        title: "",
        pubdate: "",
        aut_id: "",
        aut_name: "",
        aut_photo: "",
        is_followed: false,
        attitude: 0,
        content: "",
        is_collected: false,
    });

    const getArticleInfo = async () => {
        const { data } = await reqGetArticleInfo(route.query.id as string);
        articleInfo.value = data.data;
        loading.value = false;
    };
    getArticleInfo();
    // 关注
    const setFocus = async () => {
        await reqSetFocus(articleInfo.value.aut_id as string);
        articleInfo.value.is_followed = !articleInfo.value.is_followed;
        console.log("set", articleInfo.value.is_followed);
        Toast.success("关注成功");
        // getArticleInfo(); //! 这里的接口没做，点击本地显示就行，重新刷新就没了效果，后端没做
    };
    // 取消关注
    const delFocus = async () => {
        await reqDelFocus(articleInfo.value.aut_id as string);
        articleInfo.value.is_followed = !articleInfo.value.is_followed;
        console.log("del", articleInfo.value.is_followed);
        Toast.success("取消关注");
        // getArticleInfo();
    };
    // 切换点赞
    const toggleLike = async () => {
        if (articleInfo.value.attitude === 1) {
            await reqDelLike(articleInfo.value.art_id.toString());
            articleInfo.value.attitude = -1;
        } else {
            await reqSetLike(articleInfo.value.art_id.toString());
            articleInfo.value.attitude = 1;
        }
        Toast.success("操作成功");
    };
    // 切换喜欢
    const toggleDislike = async () => {
        if (articleInfo.value.attitude === 0) {
            await reqCancelDislike(articleInfo.value.art_id.toString());
            articleInfo.value.attitude = -1;
        } else {
            await reqDislike(articleInfo.value.art_id.toString());
            articleInfo.value.attitude = 0;
        }
        Toast.success("操作成功");
    };
</script>
<template>
    <div class="article-container">
        <!-- 导航栏 -->
        <van-nav-bar
            fixed
            left-arrow
            @click-left="$router.back()"
            title="文章详情"></van-nav-bar>
        <!-- /导航栏 -->

        <!-- 加载中 loading -->
        <van-loading v-if="loading" class="article-loading" />
        <!-- /加载中 loading -->

        <!-- 文章详情 -->
        <div class="detail" v-else>
            <h3 class="title">{{ articleInfo.title }}</h3>
            <div class="author">
                <van-image
                    :src="articleInfo.aut_photo"
                    round
                    width="1rem"
                    height="1rem"
                    fit="fill" />
                <div class="text">
                    <p class="name">{{ articleInfo.aut_name }}</p>
                    <p class="time">{{ articleInfo.pubdate }}</p>
                </div>
                <van-button
                    round
                    size="small"
                    type="default"
                    v-if="!articleInfo.is_followed"
                    @click.stop="setFocus"
                    >+ 关注</van-button
                >
                <van-button
                    round
                    size="small"
                    type="primary"
                    v-else
                    @click.stop="delFocus"
                    >已关注</van-button
                >
            </div>
            <div class="content" v-html="articleInfo.content"></div>
            <van-divider>END</van-divider>
            <div class="zan">
                <van-button
                    @click="toggleLike"
                    round
                    size="small"
                    hairline
                    type="primary"
                    plain
                    :icon="
                        articleInfo.attitude === 1 ? 'good-job' : 'good-job-o'
                    "
                    >{{
                        articleInfo.attitude === 1 ? "取消点赞" : "点赞"
                    }}</van-button
                >
                &nbsp;&nbsp;&nbsp;&nbsp;
                <van-button
                    @click="toggleDislike"
                    round
                    size="small"
                    hairline
                    type="danger"
                    plain
                    icon="delete">
                    {{ articleInfo.attitude === 0 ? "取消不喜欢" : "不喜欢" }}
                </van-button>
            </div>
            <!-- 文章评论 -->
            <div>
                <Comment :articleId="articleInfo.art_id"></Comment>
            </div>
            <!-- 文章评论 -->
        </div>
        <!-- 文章详情 -->
    </div>
</template>

<style lang="scss" scoped>
    .article-container {
        position: absolute;
        left: 0;
        top: 0;
        overflow-y: scroll;
        width: 100%;
        height: 100%;
    }
    .article-loading {
        padding-top: 100px;
        text-align: center;
    }
    .error {
        padding-top: 100px;
        text-align: center;
    }
    .detail {
        padding: 50px 10px;
        .title {
            font-size: 16px;
        }
        .zan {
            text-align: center;
        }
        .author {
            padding: 10px 0;
            display: flex;
            .text {
                flex: 1;
                padding-left: 10px;
                line-height: 1.3;
                .name {
                    font-size: 14px;
                    margin: 0;
                }
                .time {
                    margin: 0;
                    font-size: 12px;
                    color: #999;
                }
            }
        }
        .content {
            font-size: 14px;
            overflow: hidden;
            white-space: pre-wrap;
            word-break: break-all;
            :deep(img) {
                max-width: 100%;
                background: #f9f9f9;
            }
        }
    }
</style>
